<template>
    <div>
        <myHeaderVue>
            <template #left>
                <img src="../../../public/img/左箭头.svg" style="width: 20%;height: 100%;" alt="" @click="$router.go(-1)">
            </template>
            <template #center>个人信息</template>
        </myHeaderVue>
        <div class="main">
            <div class="box">
                <div>
                    头像
                </div>
                <div>
                    <img :src="obj.avatar" alt="" v-show="obj" @click="$router.push('mycode')"
                        style="width: 40%;height: 42%;"> <img src="../../../public/img/灰右箭头 (1).svg" alt=""
                        style="width: 40%;height: 42%;">
                </div>
            </div>
            <div class="box">
                <div>
                    昵称
                </div>
                <div>
                    {{obj.nickname}}
                    <img src="../../../public/img/灰右箭头 (1).svg" alt=""
                        style="width: 40%;height: 42%;margin-right: 34px;">
                </div>
            </div>
            <div class="box">
                <div>
                    手机号
                </div>
                <div>
                    {{obj.mobile}}
                </div>
            </div>
            <div class="box">
                <div>
                    性别
                </div>
                <div>
                    <img src="../../../public/img/灰右箭头 (1).svg" alt=""
                        style="width: 40%;height: 42%;margin-left: 34px;float: right;">
                </div>
            </div>
            <div class="box">
                <div>
                    出生日期
                </div>
                <div>
                    <img src="../../../public/img/灰右箭头 (1).svg" alt=""
                        style="width: 40%;height: 42%;margin-left: 34px;float: right;">
                </div>
            </div>
            <div class="box">
                <div>
                    所在城市
                </div>
                <div>
                    <img src="../../../public/img/灰右箭头 (1).svg" alt=""
                        style="width: 40%;height: 42%;margin-left: 34px;float: right;">
                </div>
            </div>
            <div class="box">
                <div>
                    学科
                </div>
                <div>
                    <img src="../../../public/img/灰右箭头 (1).svg" alt=""
                        style="width: 40%;height: 42%;margin-left: 34px;float: right;">
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import myHeaderVue from '@/components/myHeader.vue';
export default {
    components: {
        myHeaderVue
    },
    data() {
        return {
            obj: JSON.parse(localStorage.getItem('msmkcode')) || ''
        }

    },
    created() {
        console.log(this.obj);
    }
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 89vh;
    margin-top: 1vh;
    background-color: #fff;
}

.box {
    box-sizing: border-box;
    width: 96%;
    margin: auto;
    border-bottom: 1px solid #ccc;
    line-height: 1.2rem;
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .3rem;

    >div:nth-child(2) {

        display: flex;

        align-items: center;
        text-align: right;
        justify-content: space-around;
        width: 20%;
        text-align: right;
    }
}
</style>